@mixin fade-motion($className, $keyframeName) {
    $name: #{$cui-prefix}-#{$className};
    @include make-motion($name, $keyframeName);
    .#{$name}-enter,
    .#{$name}-appear {
      opacity: 0;
      animation-timing-function: linear;
    }
    .#{$name}-leave {
      animation-timing-function: linear;
    }
}
  
@include fade-motion(fade, cuiFade);
  
  @keyframes cuiFadeIn {
    0% {
      opacity: 0;
    }
  
    100% {
      opacity: 1;
    }
  }
  
  @keyframes cuiFadeOut {
    0% {
      opacity: 1;
    }
  
    100% {
      opacity: 0;
    }
  }
  